<template>
  <div class="page-ceptdata">
    <strong class="ceptdata-tip">已选Id:{{selectId}}</strong>
    <Tree class="cept-tree" ref="ceptTree" :data="fileData" :render="renderContent"></Tree>
    <div class="cept-table">
      <div>共{{showtotal}}条数据，预览最多显示20条数据</div>
      <Table size="small" :columns="dataColumns" :data="tableData"></Table>
    </div>
    <div class="ceptdata-footer">
      <Button @click="cancelHandler" style="margin-right:8px">取消</Button>
      <Button type="primary" @click="okHandler">确定</Button>
    </div>
  </div>
</template>

<script>
// import { queryModel } from 'http/api/model';
// import { fuzzyget } from 'http/api/storeEntity';
const lightColor = '#d5e8fc';
const whiteColor = '#ffffff';
const btnName = 'ceptTreeBtn';
export default {
  props: ['fileUrl'],
  data () {
    return {
      selectId: '',
      selectIds: [],
      selectName: '',
      fileData: [],
      tableData: [],
      showtotal: 0,
      dataColumns: [
        {
          title: 'ID',
          key: 'id',
          ellipsis: true,
          tooltip: true,
          with: 100
        },
        {
          title: '实体名',
          key: 'name'
        },
        {
          title: '所属概念',
          key: 'conceptName'
        }
      ]
    };
  },
  methods: {
    // 树节点绘制 render 函数
    renderContent (h, { root, node, data }) {
      let bgColor;
      bgColor =
        data.id === '-1' || data.id === this.selectId ? lightColor : whiteColor;
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        },
        [
          h('span', [
            h(
              'span',
              {
                style: {
                  backgroundColor: bgColor
                },
                domProps: {
                  className: btnName,
                  title: data.name,
                  id: `f${data.id}`
                },
                on: {
                  click: e => {
                    this.treeClick(e, data);
                  }
                }
              },
              data.name
            )
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          })
        ]
      );
    },

    // 点击树
    treeClick (e, data) {
      // 当前点击的元素dom改变颜色
      let btns = this.$refs.ceptTree.$el.querySelectorAll(btnName);
      for (let i = 0; i < btns.length; i++) {
        btns[i].style.backgroundColor = whiteColor;
      }
      e.target.style.backgroundColor = lightColor;

      this.selectId = data.id;
      this.selectName = data.name;

      // 看下是不是父级节点
      this.selectIds = [];
      this.findChildrenId();

      this.fuzzyget();
    },

    // 发现孩子节点
    findChildrenId (data) {
      let fileData = data || this.fileData;
      for (let i = 0, len = fileData.length; i < len; i++) {
        let item = fileData[i];
        if (item.id === this.selectId) {
          this.selectIds.push(item.id);
          if (item.children && item.children.length > 0) {
            this.setSelectIds(item.children);
          }
          break;
        }
        if (item.children && item.children.length > 0) {
          this.findChildrenId(item.children);
        }
      }
    },
    // 把它孩子下的id都塞进去
    setSelectIds (data) {
      for (let i = 0, len = data.length; i < len; i++) {
        let item = data[i];
        this.selectIds.push(item.id);
        if (item.children && item.children.length > 0) {
          this.setSelectIds(item.children);
        }
      }
    },

    // 图谱数据显示
    fuzzyget () {
      // fuzzyget({
      //   conceptIds: this.selectIds,
      //   name: '',
      //   pageSize: 20,
      //   pageIndex: 1
      // }).then(res => {
      //   if (res) {
      //     this.showtotal = res.total;
      //     // conceptName
      //     res.entitySearchDTOs.forEach(item => {
      //       item.conceptName = '';
      //       item.concepts.forEach(unit => {
      //         item.conceptName = item.conceptName
      //           ? item.conceptName + '/' + unit.name
      //           : unit.name;
      //       });
      //     });
      //     this.tableData = res.entitySearchDTOs;
      //   }
      // });
    },

    // 确定
    okHandler () {
      if (!this.selectId) {
        this.$Message.error('请选择图谱数据');
        return;
      }
      this.$emit('okHandler', { id: this.selectId, name: this.selectName });
    },

    // 取消
    cancelHandler () {
      this.$emit('cancelHandler');
    }
  },
  mounted () {
    // // 获取树
    // queryModel({
    //   kgId: this.$route.query.id
    // }).then(res => {
    //   if (res) {
    //     res.expand = true;
    //     this.fileData = [res];
    //   }
    // });

    // if (this.fileUrl) {
    //   this.selectId = this.fileUrl;
    //   this.fuzzyget();
    // }
  }
};
</script>

<style rel="stylesheet/less" lang="less">
.page-ceptdata {
  // max-height: 400px;
  overflow: hidden;
  // overflow-y: auto;
  .ceptdata-tip {
    display: block;
    margin-bottom: 10px;
  }
  .ceptdata-footer {
    position: absolute;
    bottom: 20px;
    clear: both;
    text-align: right;
    right: 30px;
  }
  .cept-tree,
  .cept-table {
    float: left;
    width: 250px;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .cept-table {
    width: 500px;
    margin-bottom: 10px;
    .cept-table-input {
      width: 200px;
      margin-bottom: 10px;
    }
    .ivu-page {
      margin-top: 10px;
      text-align: center;
    }
    .ivu-table-row {
      cursor: pointer;
    }
  }
  .ceptTreeBtn {
    display: inline-block;
    margin: 0;
    padding: 0 4px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    color: #666;
    border-radius: 3px;
    vertical-align: top;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
  }
}
.modal-tree-node {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 16px;
  .ivu-icon-ios-bookmark,
  .ivu-icon-ios-book {
    position: relative;
    top: -6px;
  }
}
.modal-tree-node-main {
  top: 3px;
  max-width: 100px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding: 3px 5px 3px 4px;
  user-select: none;
  cursor: pointer;
  &.selected {
    border-radius: 2px;
    background: #eee;
  }
  .ivu-icon {
    font-size: 18px;
  }
}
.modal-tree {
  padding-left: 10px;
  .ivu-tree-arrow {
    position: relative;
    float: left;
    top: 2px;
  }
}
.cept-table .ivu-table-small td {
  padding: 0;
  height: 30px;
}
</style>

<style lang="less">
</style>
